<template>
  <div class="bbp">
    <div class="top">
        <h1>爆爆团</h1>
        <h2>限时爆款-超级低价</h2>
    </div>
    <div class="list">
        <div class="qj" v-for="(item,index) in list" :key="index" :class="(cunte==index?'liang':'')" @click="gai(index)">{{item}}</div>
    </div>
    <div class="shop" v-for="(item,index) in shop" :key="index">
        <div class="imgbox">
            <img :src="item.picture" alt="">
        </div>
        <div class="text">
            <h4>{{item.name}}</h4>
            <span>售价：{{item.min_price}}</span><br>
            <span>{{item.unit}}</span><span class="qiang">马上抢</span>

        </div>
    </div>
  </div>
</template>

<script >
import {shop_list,tuan_list,user_login} from '../utils/api'
export default {
    comments:{

    },
    data(){
        return{
            list:["正在抢购",'上新预告'],
            shop:[],
            cunte:0,
        }
    },
     mounted() {
    // 请求 爆爆团-正在抢购列表
    tuan_list( {status:0} ).then((res)=>{
      console.log(res.data);
      this.shop = res.data.list
    })
  },
  methods:{
    gai(index){
        if(index==0){ // 请求 爆爆团-正在抢购列表
            tuan_list( {status:0} ).then((res)=>{
            console.log(res.data);
            this.shop = res.data.list
    }) 
        }else{
           this.cunte = index;
            tuan_list( {status:1} ).then((res)=>{
        console.log(res.data);
        this.shop = res.data.list
        })
        }
    } 
        }
        
}

</script >

<style scoped>
.top{
    color: white;
    width: 100%;
    background-color: rgb(249, 81, 14);
    text-align: center;
}
.list{
    background-color: rgb(249, 81, 14);
    display: flex;
}
.list>div{
    margin: 15px 10px;
}
.shop{
    display: flex;
    margin: 10px 10px 10px 10px;
}
.imgbox{
    width: 100px;
    /* background-color: aqua; */
    margin: 0 10px 10px 0px;
}
.imgbox>img{
    width: 100%;
}
.qiang{
    padding: 5px 10px;
    /* background-color: red; */
    border-radius: 15px;
    float: right;
}
.liang{
    border-bottom: 1px solid white;
}
</style>